<template>
  <div>
    <div @click="onSelectNextUsers()" style="cursor: pointer">
      <el-input
        :disabled="disabled"
        v-model="currentRow.nickName"
        readonly
        :placeholder="placeholder"
        ><i
          v-if="currentRow.nickName && !disabled"
          slot="suffix"
          @click.stop="clickIcon"
          class="el-input__icon el-icon-circle-close"
        ></i
      ></el-input>
    </div>
    <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
      <el-row type="flex" :gutter="20">
        <!--部门数据-->
        <el-col :span="5">
          <el-card shadow="never" style="height: 100%">
            <div slot="header">
              <span>部门列表</span>
            </div>
            <div class="head-container">
              <el-input
                v-model="deptName"
                placeholder="请输入部门名称"
                clearable
                size="small"
                prefix-icon="el-icon-search"
              />
              <el-tree
                :current-node-key="100"
                highlight-current
                :data="deptOptions"
                :props="deptProps"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                ref="tree"
                node-key="id"
                default-expand-all
                @node-click="handleNodeClick"
              />
            </div>
          </el-card>
        </el-col>
        <el-col :span="18">
          <el-table
            ref="userTable"
            height="500"
            v-loading="userLoading"
            :data="userList"
            highlight-current-row
            @current-change="changeCurrentUser"
          >
            <!-- <el-table-column width="55" type="selection" /> -->

            <el-table-column label="用户名" align="center" prop="nickName" />
            <el-table-column label="手机" align="center" prop="phonenumber" />
            <el-table-column label="部门" align="center" prop="dept.deptName" />
          </el-table>
          <pagination
            :total="total"
            :page.sync="queryParams1.pageNum"
            :limit.sync="queryParams1.pageSize"
            @pagination="getListUser"
          />
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="open = false">取 消</el-button>
        <el-button type="primary" @click="submitUserData">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { selectUser, deptTreeSelect } from "@/api/system/user";

export default {
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    value: [String, Object, Array],
    placeholder: {
      type: String,
      default: "请检索员工",
    },
    typeValue: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      deptProps: {
        children: "children",
        label: "label",
      },
      open: false,
      title: "人员检索",
      deptOptions: [],
      userLoading: false,
      queryParams1: {
        deptId: undefined,
      },
      userMultipleSelection: [],
      // 部门名称
      deptName: undefined,
      userList: [],
      currentRow: {
        nickName: "",
      },
      total: "",
    };
  },
  watch: {
    value: {
      handler(val) {
        this.currentUserId = val;
        if (!val) this.clickIcon();
      },
      deep: true,
      immediate: true,
    },
    typeValue: {
      handler(val) {
        this.queryParams1.deptId = val;
      },
      deep: true,
      immediate: true,
    },
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    },
  },
  mounted() {
    this.getListUser();
  },
  methods: {
    /** 查询部门下拉树结构 */
    getTreeSelect() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    onSelectNextUsers() {
      if (this.disabled) return;
      this.onSelectUsers("人员");
    },
    onSelectUsers(title) {
      this.getTreeSelect();
      this.getListUser();
      this.open = true;
      console.log(this.open);
      this.$nextTick(() => {
        this.$refs.tree.setCurrentKey(this.typeValue, true);
      });
    },

    /** 查询用户列表 */
    getListUser() {
      this.userLoading = true;
      selectUser(this.queryParams1).then((response) => {
        this.userLoading = false;

        this.userList = response.rows;

        this.total = response.total;
        console.log(this.value, "this.value");
        if (this.value && this.userList.length) {
          console.log("0000", this.userList);
          this.currentRow = this.userList.find((k) => k.userId == this.value);
          console.log(this.currentRow);
          this.$emit("change", this.currentRow);
          this.toggleSelection(this.currentRow);
        }
      });
    },
    clickIcon(e) {
      (this.currentRow = {
        nickName: "",
      }),
        (this.currentUserId = "");
      this.$emit("change", this.currentRow);
      this.$emit("input", this.currentUserId);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      if (this.typeValue) {
        this.$modal.msgWarning("只能选择当前部门");
        return;
      }
      this.queryParams1.deptId = data.id;
      this.onSelectUsers();
    },
    changeCurrentUser(val) {
      console.log(val);
      this.currentUserId = val.userId;
    },
    toggleSelection(selection) {
      if (selection) {
        console.log(1);
        this.$nextTick(() => {
          this.$refs.userTable.setCurrentRow(selection);
        });
      } else {
        this.$nextTick(() => {
          // this.$refs.userTable.clearSelection();
        });
      }
    },
    submitUserData() {
      if (!this.currentUserId) {
        this.$modal.msgError("请选择人员");
        return false;
      }
      this.currentRow = this.userList.find(
        (k) => k.userId === this.currentUserId
      );
      this.$emit("change", this.currentRow);
      this.$emit("input", this.currentUserId);
      this.open = false;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-input__inner {
  cursor: pointer;
}
</style>
